<!-- 定义模版对象 -->
<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 1,登录头像区域-->
      <div class="avatar_box">
        <img src="../assets/nn.jpg" alt="VUE图片"/>
      </div>

      <el-form label-width="0" ref="loginFormRef" class="login_form" :rules="rules" :model="loginForm">
        <el-form-item prop="username">
          <el-input placeholder="请输入用户名" prefix-icon="iconfont iconuser" v-model="loginForm.username">用户名</el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" type="password" prefix-icon="iconfont iconsuo" v-model="loginForm.password">密码
          </el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="login" @keyup.enter="Enter">登录</el-button>
          <el-button type="info" @click="resetBtn">重置</el-button>
          <el-button type="primary" @click="dialogVisible = true">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog title="欢迎注册牛牛旅行" :visible.sync="dialogVisible" width="70%" @close="closeDialog">
      <!-- 定义用户提交表单数据-->
      <el-form :model="addUserModel" :rules="rules" ref="addUserRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUserModel.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addUserModel.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="密码确认" prop="password2">
          <el-input v-model="addUserModel.password2" type="password"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="addUserModel.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addUserModel.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserBtn">确 定</el-button>
      </span>
    </el-dialog>

  </div>

</template>

<!-- 定义JS变量 -->
<script>
export default {
  data() {
    //校验邮箱规则 rule校验规则   value校验的数据   callback回调函数
    const checkEmail = (rule, value, callback) => {
      //定义邮箱的正则表达式  JS中用/来表示正则表达式的开始和结束
      const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/
      //正则表达式语法校验  test(xx) 校验成功 返回true  校验失败返回false
      if (emailRege.test(value)) {
        //表示邮箱合法 正确返回
        return callback()
      }
      callback(new Error('请填写正确的邮箱地址'))
    }

    //校验手机号的邮箱规则
    const checkPhone = (rule, value, callback) => {

      //定义校验手机号的正则语法
      const phoneRege = /^1[23456789][0-9]{9}$/
      if (phoneRege.test(value)) {

        return callback()
      }
      callback(new Error('请填写正确的手机号'))

    }

    const checkPassword = (rule, value, callback) => {
      if (this.addUserModel.password !== value) return callback(new Error('2次密码输入不一致'))
      //否则校验成功
      callback()
    }
    return {
      loginForm: {
        username: '',
        password: '',
        text: ''
      },
      userList: [],
      //记录总数是数值类型
      total: 0,
      dialogVisible: false,
      addUserModel: {
        username: '',
        password: '',
        password2: '',
        email: '',
        phone: ''
      },
      //数据校验规则
      rules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
          {
            min: 3,
            max: 30,
            message: '长度在 3 到 30 个字符',
            trigger: 'blur'
          }
        ],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        },
          {
            min: 3,
            max: 30,
            message: '长度在 3 到 30 个字符',
            trigger: 'blur'
          }
        ],
        password2: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        },
          {
            min: 3,
            max: 30,
            message: '长度在 3 到 30 个字符',
            trigger: 'blur'
          },
          {
            validator: checkPassword,
            trigger: 'blur'
          }
        ],
        phone: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        },
          {
            min: 3,
            max: 30,
            message: '长度在 3 到 30 个字符',
            trigger: 'blur'
          },
          {
            validator: checkPhone,
            trigger: 'blur'
          }
        ],
        email: [{
          required: true,
          message: '请输入邮箱',
          trigger: 'blur'
        },
          {
            min: 3,
            max: 30,
            message: '长度在 3 到 30 个字符',
            trigger: 'blur'
          },
          {
            validator: checkEmail,
            trigger: 'blur'
          }
        ]
      },
      updateDialogVisible: false,
    }
  },
  methods: {
    resetBtn() {
      this.$refs.loginFormRef.resetFields()
    },
    handleCodeBtn() {
      this.generatedCode()
    },
    closeDialog() {
      //重置表格数据
      this.$refs.loginFormRef.resetFields()
    },
    async login() {
      let {
        data: result
      } = await this.$http.post("/user/login", this.loginForm)
      if (result.status !== 200) return
      this.$message.error('用户名或密码错误')
      this.$message.success('用户登陆成功')
      let token = result.data
      window.sessionStorage.setItem("token", token)
      //！！！！！如果用户登录成功,则应该跳转到系统的首页！！！！
      this.$router.push("/home")
    },
    //校验用户数据
    addUserBtn() {
      this.$refs.addUserRef.validate(async valid => {
        //如果校验失败 则停止数据
        if (!valid) return
        //console.log(this.addUserModel)
        const {
          data: result
        } = await this.$http.post('/user/addUser', this.addUserModel)
        if (result.status !== 200) return this.$message.error("用户新增失败")
        this.$message.success("用户新增成功")
        //关闭对话框
        this.dialogVisible = false
        //重新获取用户列表
        this.getUserList()
      })
    },
  }
}
</script>

<!-- 防止组件冲突 -->
<style lang="less" scoped>
.login_container {
  //2,登录界面背景
  background-image: url(../assets/zhuce.jpg);
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  // position: fixed;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: #FFFFFF;
  /* 设定圆弧角*/
  border-radius: 10px;
  position: absolute;
  left: 70%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #EEEEEE;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #DDDDDD;
    /* 添加阴影*/
    position: absolute;
    /* 绝对定位*/
    left: 50%;
    /* 距离左侧50%*/
    transform: translate(-50%, -50%);
    /*回调50%*/
    background-color: #FFFFFF;

    img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      background-color: #EEEEEE;
    }
  }

  .btns {
    display: flex;
    justify-content: flex-end;

  }

  // 登录界面
  .login_form {
    position: absolute;
    bottom: 0;
    width: 98%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .mod-new-reg-text {
    position: fixed;
    left: 195px;
    top: 314px;
    color: #FFFFFF;
  }
}
</style>
